import React, { Component } from 'react'

export default class App extends Component {

    state = {
        src: ''
    }

    getFile(e) {

        //1. URL.createObjectURL(e.target.files[0]) 根据文件生成一个临时路径
        //使用用户选择的文件需要展示的时候可以使用

        // console.log(URL.createObjectURL(e.target.files[0]));
        // URL.createObjectURL(e.target.files[0])
        // this.setState({
        //     src:URL.createObjectURL(e.target.files[0])
        // })

        


        //2.使用加载器将图片转换成 Base64
        const reader = new FileReader()

        //读取该文件
        reader.readAsDataURL(e.target.files[0])

        // 文件读取成功后的回调函数
        // reader.result 就是读取成功后的结果
        reader.onload = () => {
            this.setState({
                src:reader.result
            })
        }
    }

    render() {
        return (
            <div>
                <input type="file" name="" id="" onChange={(e) => { this.getFile(e) }} />

                {/* 展示读取成功之后的 base64 */}
                <img src={this.state.src} alt="" />
            </div>
        )
    }
}
